<template>
	<view class="login-container">
		<view style="width: 90%;">
			<view style="margin-top: 32rpx;">
				<text style="font-weight: 400;font-size: 28rpx;color: #4E5969;line-height: 44rpx;">基本信息填写
				</text>
			</view>
			<view class="flex input">
				<view style="width: 20%;">
					<text style="font-size: 32rpx;color: #1D2129;line-height: 96rpx;text-align: left;">真实姓名</text>
				</view>
				<view style="width:80%;margin-left: 32rpx;height: 100%;display: flex;align-items: center;">
					<input type="text" v-model="formData.username" style="width:80%" placeholder="请输入真实姓名" />
				</view>
			</view>
			<view class="flex input1">
				<view style="width: 20%;">
					<text style="font-size: 32rpx;color: #1D2129;line-height: 96rpx;text-align: left;">身份证号</text>
				</view>
				<view style="width:80%;margin-left: 32rpx;height: 100%;display: flex;align-items: center;">
					<input type="text" v-model="formData.userId" style="width:80%" placeholder="请输入身份证号"/>
				</view>
			</view>
			<view style="margin-top: 32rpx;">
				<text style="font-weight: 400;font-size: 28rpx;color: #4E5969;line-height: 44rpx;">请拍摄/上传本人真实有效的身份证照片
				</text>
			</view>
			<view style="margin-top: 32rpx;margin-bottom:24rpx">
				<text style="font-size: 32rpx;color: #1D2129;line-height: 48rpx;text-align: left">身份证人像面	
				</text>
			</view>
			<view class="rea" @click="changeAvatarUrl('sfzpositive')">
				<image :src="card_zm" mode="aspectFit" style="width: 232rpx;height: 142rpx;" v-if="formData.sfzpositive ==''" ></image>
				<image src="https://shoujizulin3.hzrjkf.com/static/wxpng/ps.png" mode="aspectFit" style="width: 100rpx; height: 100rpx;" class="aCentent" v-if="formData.sfzpositive == ''" ></image>
				<image :src="formData.sfzpositive" v-if="formData.sfzpositive !== ''" mode="aspectFit" style="width: 232rpx;height: 142rpx;" ></image>
			</view>
			<view style="margin-top: 32rpx;margin-bottom:24rpx">
				<text style="font-size: 32rpx;color: #1D2129;line-height: 48rpx;text-align: left;">身份证国徽面	
				</text>
			</view>
			<view class="rea"  @click="changeAvatarUrl('sfzback')">
				<image :src="card_bm" mode="aspectFit" style="width: 232rpx;height: 142rpx;" v-if="formData.sfzback ==''" ></image>
				<image src="https://shoujizulin3.hzrjkf.com/static/wxpng/ps.png" mode="aspectFit" style="width: 100rpx; height: 100rpx;" class="aCentent" v-if="formData.sfzback == ''"  ></image>
				<image :src="formData.sfzback" v-if="formData.sfzback !== ''" mode="aspectFit" style="width: 232rpx;height: 142rpx;" ></image>
				
			</view>
			
			<view style="margin-top: 32rpx;margin-bottom:24rpx">
				<text style="font-size: 32rpx;color: #1D2129;line-height: 48rpx;text-align: left;">手持身份证	
				</text>
			</view>
			<view class="rea"  @click="changeAvatarUrl('shouc')">
				<image :src="card_sc" mode="aspectFit" style="width: 232rpx;height: 142rpx;" v-if="formData.shouc == ''" ></image>
				<image src="https://shoujizulin3.hzrjkf.com/static/wxpng/ps.png" mode="aspectFit" style="width: 100rpx; height: 100rpx;" class="aCentent" v-if="formData.shouc == ''"></image>
				<image :src="formData.shouc" v-if="formData.shouc !== ''" mode="aspectFit" style="width: 232rpx;height: 142rpx;" ></image>
			</view>
			<view style="margin-top: 32rpx;">
				<text style="font-weight: 400;font-size: 28rpx;color: #4E5969;line-height: 44rpx;">请确保身份证照片不得有遮挡，保持字迹清晰
				</text>
			</view>
			<view><button type="default" @click="formSubmit" class="tijiao">提交认证</button></view>
			<Upload v-if="isUpload" @getImgs="getImgsFunc"></Upload>
			<!-- 上传图片 -->
			<Uploads v-if="isUpload1" @getImgs="getImgsFunc1"></Uploads>
			<Uploadss v-if="isUpload2" @getImgs="getImgsFunc2"></Uploadss>
		</view>

	</view>
</template>

<script>
	import Upload from '@/components/upload/uploadOne.vue';
	import Uploads from '@/components/upload/uploadOne.vue';
	import Uploadss from '@/components/upload/uploadOne.vue'
	export default {
		components: {
			Upload,
			Uploads,
			Uploadss
		},
		data() {
			return {
				bgColor: '#00C8BE',
				loading: true,
				username: "",
				usernum: "",
				image: '',
				userInfo: {},
				isUpload: false,
				ad: true,
				as: true,
				isUpload1: false,
				isUpload2: false,
				/*表单数据对象*/
				formData: {
					/*手机号*/
					mobile: '',
					/*验证码*/
					code: '',
					sfzpositive: '',
					sfzback: '',
					username: "",
					userId: "",
					shouc:'', // 手持身份证照片
				},
				card_zm:"",
				card_bm:"",
				card_sc:""
				
			};
		},
		onLoad() {
			let self = this;
			
			
			self._get(
				'user.index/detail', {},
				function(res) {
					// console.log(res.data.userInfo.sfzpositive, "身份证上传成功返回");
					// console.log(res.data.userInfo.sfzback, "身份证上传成功返回");
					if (res.data.userInfo.sfzpositive) {
						self.formData.sfzpositive = res.data.userInfo.sfzpositive;
					}
					if (res.data.userInfo.sfzback) {
						self.formData.sfzback = res.data.userInfo.sfzback;
					}
					if(res.data.userInfo.hand_id_card){
						self.formData.shouc = res.data.userInfo.hand_id_card;
					}
					if(res.data.userInfo.username){
						self.formData.username = res.data.userInfo.username
					}
					if(res.data.userInfo.usernum){
						self.formData.userId = res.data.userInfo.usernum
					}
				}
			);
		},
		mounted() {
			let self = this
			uni.getStorageSync('username');
			uni.getStorageSync('usernum');
			// console.log(uni.getStorageSync('username'))
			// console.log(uni.getStorageSync('usernum'))	
			self.username = uni.getStorageSync('username')
			self.usernum = uni.getStorageSync('usernum')
			self.card_zm = self.websiteUrl + '/image/sfz/card_zm.png'
			self.card_bm = self.websiteUrl + '/image/sfz/card_bm.png'
			self.card_sc = self.websiteUrl + '/image/sfz/card_sc.png'
		},
		methods: {
			/*获取上传的图片正面*/
			getImgsFunc(e) {
				console.log(e,'55555')
				let self = this;
				if (e && typeof(e) != 'undefined') {
					self.userInfo.avatarUrl = e[0].file_path;
					self.formData.sfzpositive = self.userInfo.avatarUrl;
					self.isUpload = false;
					// self.ad=false;
				}else{
					self.isUpload = false
				}
				self.isUpload = false
			},

			/* 修改头像 */
			changeAvatarUrl(type) {
				let self = this;
				// self.isUpload = true;
				let params = {
					token: uni.getStorageSync('token'),
				    app_id: 10001
				};
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera '], //从相册选择
					success(res) {
						let imageList = res.tempFilePaths
						uni.uploadFile({
							url: self.websiteUrl + '/index.php?s=/api/file.upload/image',
							filePath: imageList[0],
							fileType:'image',
							name: 'iFile',
							formData: params,
							success(data){
								let image = JSON.parse(data.data)
								if(type=='sfzpositive'){
									self.formData.sfzpositive =image.data.file_path
								}else if(type=='sfzback'){
									self.formData.sfzback =image.data.file_path
								}else {
									self.formData.shouc =image.data.file_path
								}
							}
						})
					}
				})
			},
			/*获取上传的图片反面*/
			getImgsFunc1(e) {
				let self = this;
				if (e && typeof(e) != 'undefined') {
					self.userInfo.sfzback = e[0].file_path;
					self.formData.sfzback = self.userInfo.sfzback;
					self.isUpload1 = false;
					// self.as=false;
				}else {
					self.isUpload1 = false;
				}
				self.isUpload1 = false;
			},
			getImgsFunc2(e){
				console.log(e);
				let self = this 
				if(e &&  typeof(e) != 'undefined'){
					self.userInfo.shouc = e[0].file_path;
					self.formData.shouc = self.userInfo.shouc;
					self.isUpload2  = false
				}
				self.isUpload2  = false
			},
			/* 修改头像 */
			changeAvatarUrl1() {
				let self = this;
				self.isUpload1 = true;
			},
			changeAvatarUrl2(){
				let self = this 
				console.log(self.isUpload2);
				self.isUpload2 =true
			},
			/*提交*/
			formSubmit() {
				let self = this;
				self.loading = true;
				if(self.formData.username ==''){
					uni.showToast({
						title:"请填写真实姓名",
						duration:2000
					})
					return
				}
				if(self.formData.userId==''){
					uni.showToast({
						title:"请填写您的身份证号",
						duration:2000
					})
					return
				}
				if (self.formData.sfzback=='') {
					uni.showToast({
						title: '请将身份证正面照片上传!!',
						duration: 2000
					});
					return
				}
				if(self.formData.sfzback==''){
					uni.showToast({
						title:"请将身份证背面照片上传",
						duration: 2000
					})
				}
				if(self.formData.shouci==''){
					uni.showToast({
						title:"请将手持身份证照片上传",
						duration: 2000
					})
				}
				uni.showLoading({
					title: '正在提交'
				});
				self._post('esign.eqb/ocrIdCard',{
					idcard_url: self.formData.sfzpositive,
				},function(res){
					if(res.code==1){
						self._post(
							'user.user/realNameAuthentication', {
								// 真实姓名
								username: res.data.name,
								usernum: res.data.idNo,
								//sfz正面
								sfzpositive: self.formData.sfzpositive,
								//sfz反面
								sfzback: self.formData.sfzback,
								hand_id_card:self.formData.shouc,
								address:res.data.address,
							},
							function(resss) {
								console.log(resss, "请求成功返回");
								if (resss.code == 1) {
									uni.showToast({
										title: '绑定成功',
										duration: 2000
									});
									self.loading = false;
									setTimeout(function() {
										// 执行回调函数
										uni.navigateBack();
										// uni.redirectTo({
										// 	url: "/pages/user/emergency"
										// })
									}, 2000);
								} else {
									uni.showToast({
										title: '绑定失败',
										duration: 2000
									});
								}
							})
					}
				})
				
			}
		}
	};
</script>


<style lang="scss" scoped>
	.login-container {
		background: #fff;
		display: flex;
		justify-content: center;
	}

	.flex {
		display: flex;
	}

	.input {
		height: 96rpx;
		width: 100%;
		background-color: #fff;
		margin-top: 16rpx;
	}

	.input1 {
		height: 96rpx;
		width: 100%;
		background-color: #fff;
	}

	.tijiao {
		margin: 50rpx auto 0;
		width: 582rpx;
		height: 88rpx;
		background:  #5BC5BB;
		border-radius: 96rpx;
		line-height: 88rpx;
		color: #FFFFFF;
	}
	.rea{
		position: relative;
		width: 720rpx;
		height: 142rpx;
	}
	.aCentent {
		position: absolute;
		top:20rpx;
		left:66rpx
	}
</style>